<template>
    <div>
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名字">
                <el-input v-model="formInline.user" placeholder="名字"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="add">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 搜索表单 -->
        <!-- 展示表格 -->
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" border v-loading="loading">
            <el-table-column prop="id" label="ID"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="age" label="年龄"> </el-table-column>
            <el-table-column prop="phone" label="电话"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 展示表格 -->
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :total="total"
        >
        </el-pagination>
        <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="form.age"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="editdialogVisible" width="30%">
            <div>
                <el-form ref="form" :model="editForm" label-width="80px">
                    <el-form-item label="名称">
                        <el-input v-model="editForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="editForm.address"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="editForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="editForm.phone"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import network from '../network/index';
export default {
    data() {
        return {
            formInline: {
                user: ''
            },
            loading: false,
            dialogVisible: false,
            editdialogVisible: false,
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王老虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    status: 1
                },
                {
                    date: '2016-05-04',
                    name: '王发发',
                    address: '四川省成都市某桥洞',
                    status: 2
                },
                {
                    date: '2016-05-01',
                    name: '唐发发',
                    address: '桥洞边上',
                    status: 3
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    status: 4
                }
            ],
            form: {
                name: '',
                address: '',
                age: '',
                phone: ''
            },
            editForm: {
                name: '',
                address: '',
                age: '',
                phone: '',
                id: null
            },
            editIndex: null,
            pageNum: 1,
            pageSize: 5,
            total: 0
        };
    },
    mounted() {
        console.log(this.$store.state.name);
        this.getData();
    },
    methods: {
        // 获取列表数据
        getData() {
            network({
                url: '/students/check',
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.formInline.user
                }
            }).then((res) => {
                this.tableData = res.data.results;
                this.total = res.data.total;
                console.log(res);
            });
        },
        // 翻页时的监听
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getData();
        },
        // 改
        // 第一步点编辑按钮打开弹窗的时候赋值(在点击编辑的时候把row的值给弹窗的双向绑定)
        // 第二步我弹窗要知道改的谁(把下标存起来)
        // 第三步点击弹窗的修改的时候才修改数据(利用存起来的下标获取我要改谁)
        // 第四步 改值步并关闭弹窗
        edit() {
            network({
                url: '/students/edit',
                method: 'put',
                data: this.editForm
            }).then((res) => {
                if (res.data.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.getData();
                    this.editdialogVisible = false;
                } else {
                    this.$message('学生名称重复');
                }
            });
        },
        onSubmit() {
            this.pageNum = 1;
            this.getData();
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        // 编辑
        handleEdit(i, row) {
            this.editIndex = i;
            this.editForm.name = row.name;
            this.editForm.address = row.address;
            this.editForm.age = row.age;
            this.editForm.phone = row.phone;
            this.editForm.id = row.id;
            this.editdialogVisible = true;
        },
        handleDelete(i, row) {
            // 我们自己去操作的数组
            // 有接口的话，直接掉用接口
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    console.log(row);
                    network({
                        url: '/students/delete',
                        method: 'delete',
                        data: {
                            id: row.id
                        }
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getData();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        add() {
            this.dialogVisible = true;
        },
        sure() {
            network({
                url: '/students/add',
                method: 'post',
                data: this.form
            }).then((res) => {
                if (res.data.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                    this.onSubmit();
                    this.dialogVisible = false;
                } else {
                    this.$message({
                        type: 'info',
                        message: res.data.data
                    });
                }
                console.log(res);
            });
        }
    }
};
</script>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
.el-pagination {
    margin-top: 30px;
}
</style>
